---
layout: default
---
<script type="text/javascript">
$(function(){
   var warning = $(".message");
   
   $("select").multiselect({ 
      header: "Choose only TWO items!",
      click: function(e){
      
         if( $(this).multiselect("widget").find("input:checked").length > 2 ){
            warning.addClass("error").removeClass("success").html("You can only check two checkboxes!");
            return false;
         } else {
            warning.addClass("success").removeClass("error").html("Check a few boxes.");
         }
         
      }
   });
});
</script>

<h2>Max Checked Test</h2>
<p>Logic to impose a maximum number of checked inputs (two in this demo).</p>

<p class="message success">Check a few boxes.</p>

<form>
   <select multiple="multiple">
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
   <option value="option4">Option 4</option>
   <option value="option5">Option 5</option>
   <option value="option6">Option 6</option>
   <option value="option7">Option 7</option>
   </select>
</form>

<pre class="prettyprint">
var warning = $(".message");

$("select").multiselect({ 
   header: "Choose only TWO items!",
   click: function(e){
       if( $(this).multiselect("widget").find("input:checked").length > 2 ){
           warning.addClass("error").removeClass("success").html("You can only check two checkboxes!");
           return false;
       } else {
           warning.addClass("success").removeClass("error").html("Check a few boxes.");
       }
   }
});
</pre>
